<template>
  <el-dialog title="代码预览" v-model="open" width="80%" top="5vh" append-to-body :before-close="handleClose" draggable>
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in tabs"
        :label="item.label"
        :name="item.name"
        :key="index"
      >
        <el-link :underline="false" icon="DocumentCopy" v-copyText="codeData[item.name]" v-copyText:callback="copyTextSuccess" style="float:right">&nbsp;复制</el-link>
        <pre>{{ codeData[item.name] }}</pre>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { getCodePreview } from "@/api/login.js";
const { proxy } = getCurrentInstance();

const emits = defineEmits(['close'])
const props = defineProps({
  moduleName: {
    type: String,
    required: true
  },
  className: {
    type: String,
    required: true
  }
})
const open = ref(false)

const activeName = ref('controller')
const tabs = ref([
  { name: 'controller', label: 'Controller' },
  { name: 'service', label: 'Service' },
  { name: 'dto', label: 'DTO' },
  { name: 'entity', label: 'Entity' },
])
// 代码
const codeData = ref({
  controller: '',
  service: '',
  dto: '',
  entity: ''
})

// 获取源代码预览
const getList = () => {
  getCodePreview({
    moduleName: props.moduleName,
    className: props.className
  }).then(res => {
    console.log('源代码', res)
    codeData.value = res.data;
    open.value = true
  })
}

/** 复制代码成功 */
function copyTextSuccess() {
  proxy.$modal.msgSuccess("复制成功");
}

// 关闭弹框
const handleClose = () => {
  emits('close')
}

onMounted(() => {
  getList()
})

</script>

<style lang="scss" scoped>
:deep(.el-tabs__content) {
  max-height: 78vh;
  overflow-y: scroll;
}
pre {
  overflow-x: auto;
}
</style>
